<template>
	<view class="user">
		<view class="headtop"></view>
		<view class="form">
			<view class="list clearfix">
				<view class="name fl">真实姓名</view>
				<view class="input fr">
					<input type="text" placeholder="请输入真实姓名" v-model="zsname"/>
				</view>
			</view>
			<view class="list clearfix">
				<view class="name fl">身份证号</view>
				<view class="input fr">
					<input type="text" placeholder="请输入身份证号" v-model="id_card"/>
				</view>
			</view>
			<view class="list clearfix">
				<view class="name fl">手机号</view>
				<view class="input fr">
					<input type="text" placeholder="请输入手机号" v-model="tell" />
				</view>
			</view>
			<view class="list clearfix">
				<view class="name fl">短信验证码</view>
				<view class="input fr">
					<view class="yzm" v-if="time == 60 || time == 0" @click="fasong">获取验证码</view>
					<input type="text" placeholder="请输入验证码" v-model="yzm" v-else />
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="submit" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				tell: '',
				zsname: '',
				id_card: '',
				yzm: '',
				time: 60,
				timer: null,
				password: '',
			}
		},
		onLoad() {
			
			// 用户信息
			this.request({
				url: '/xcx/users',
				data: {
					id: uni.getStorageSync('user_id'),
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.tell = res.data.data.mobile;
					this.zsname = res.data.data.zsname;
					this.id_card = res.data.data.id_card;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			submit(){
				let zsname = this.zsname;
				let id_card = this.id_card;
				let yzm = this.yzm;
				let tell = this.tell;
				
				if(zsname == '' || id_card == '' || yzm == '' || tell == ''){
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					})
					return false;
				}
				
				//提交
				this.request({
					url: '/xcx/tsusersave',
					data: {
						user_id: uni.getStorageSync('user_id'),
						zsname: zsname,
						id_card: id_card,
						yzm: yzm,
						tell: tell,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						})
						
						setTimeout(function(){
							uni.redirectTo({
								url: '/pages/user/index'
							})
						},2000)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			fasong(){
				let that =  this;
				
				if( !(/^1[3|4|5|7|8]\d{9}$/.test(this.tell)) ){
					uni.showToast({
						title: '手机号格式有误',
						icon: 'none'
					})
					return false;
				}
				
				this.request({
					url: '/xcx/send_code',
					data: {
						tell: this.tell,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
						
						// 定时60秒
						that.timer = setInterval(() => {
							that.time = that.time - 1;
							if(that.time==0){
								clearTimeout(that.timer);
								that.timer = null;
								that.time = 60;
							}
						},1000);
					} else {
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						})
						return false;
					}
				})
			},
			fanhui() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
			padding: 20rpx 40rpx 0;
			box-sizing: border-box;
		}
		
		.form{
			width: 90%;
			margin: 0 auto;
			z-index: 70;
			margin-top: -260rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;
			padding: 0 30rpx;
			
			.list{
				width: 100%;
				box-sizing: border-box;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #D8D8D8;
				
				.name{
					width: 30%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 28rpx;
					color: #333333;
				}
				
				.input{
					width: 60%;
					height: 100%;
					
					input{
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						color: #999999;
						text-align: right;
					}
					
					.yzm{
						height: 90rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						color: #368BF8;
						text-align: right;
					}
				}
			}
			
			.list:last-child{
				border: none;
			}
		}
		
		.footer {
			width: 100%;
			margin: 0 auto 40rpx;
			margin-top: 100rpx;
			height: 72rpx;
			text-align: center;
		
			.submit {
				width: 80%;
				margin: 0 auto;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #00D6C0;
				color: #ffffff;
				font-size: 32rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>